<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>花龙腾航 - Cookie政策</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 优化后的自定义样式 */
        .page {
            height: 100vh;
            width: 100%;
            overflow-y: auto;
            scroll-snap-type: y mandatory;
            scroll-behavior: smooth;
        }

        .page-section {
            height: 100vh;
            scroll-snap-align: start;
            position: relative;
            overflow: hidden;
        }

        .parallax-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            z-index: -1;
            opacity: 0.3;
            transition: transform 0.5s ease-out;
        }

        .cookie-icon {
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
            100% { transform: translateY(0px); }
        }

        .nav-dots {
            position: fixed;
            right: 30px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 100;
        }

        .nav-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgba(255,255,255,0.5);
            margin: 10px 0;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .nav-dot.active {
            background-color: #3b82f6;
            transform: scale(1.3);
        }

        .fade-in {
            animation: fadeIn 1s ease-in;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 新增优化样式 */
        .card-hover {
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        .card-hover:hover {
            box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.08);
        }

        .bg-glass {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }

        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked + .toggle-slider {
            background-color: #3b82f6;
        }

        input:checked + .toggle-slider:before {
            transform: translateX(26px);
        }

        /* 响应式优化 */
        @media (max-width: 768px) {
            .page-section {
                height: auto;
                min-height: 100vh;
                padding: 4rem 0;
            }

            .nav-dots {
                display: none;
            }
        }
    </style>
</head>
<body class="bg-gray-100 font-sans antialiased">
<!-- 导航点 -->
<div class="nav-dots">
    <div class="nav-dot active" data-target="0"></div>
    <div class="nav-dot" data-target="1"></div>
    <div class="nav-dot" data-target="2"></div>
    <div class="nav-dot" data-target="3"></div>
    <div class="nav-dot" data-target="4"></div>
</div>

<!-- 主页面容器 -->
<div class="page" id="page-container">
    <!-- 封面页 -->
    <section class="page-section bg-gradient-to-br from-blue-900 to-indigo-900 text-white flex flex-col items-center justify-center relative">
        <div class="parallax-bg" style="background-image: url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div>

        <div class="container mx-auto px-6 text-center fade-in">
            <div class="cookie-icon mb-8">
                <i class="fas fa-cookie-bite text-6xl text-yellow-300"></i>
            </div>
            <h1 class="text-4xl md:text-5xl font-bold mb-6">花龙腾航 Cookie政策</h1>
            <p class="text-lg md:text-xl mb-8 max-w-2xl mx-auto">了解我们如何使用Cookie来提升您的浏览体验</p>

            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-full transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50">
                    接受所有Cookie
                </button>
                <button class="bg-transparent hover:bg-white hover:text-blue-900 text-white font-bold py-3 px-6 border-2 border-white rounded-full transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50">
                    自定义设置
                </button>
            </div>

            <div class="absolute bottom-10 left-0 right-0 text-center">
                <p class="text-sm opacity-80 mb-2">向下滚动了解更多</p>
                <i class="fas fa-chevron-down animate-bounce"></i>
            </div>
        </div>
    </section>

    <!-- 什么是Cookie -->
    <section class="page-section bg-white text-gray-800 flex items-center">
        <div class="container mx-auto px-6 py-12 grid md:grid-cols-2 gap-12 items-center">
            <div class="fade-in">
                <h2 class="text-3xl md:text-4xl font-bold mb-6 text-blue-800">什么是Cookie?</h2>
                <p class="text-base md:text-lg mb-6 leading-relaxed">Cookie是当您访问网站时存储在您设备上的小型文本文件。它们被广泛用于使网站正常运行或更高效地工作，以及向网站所有者提供信息。</p>

                <div class="bg-blue-50 p-6 rounded-lg mb-6 card-hover">
                    <div class="flex items-start">
                        <i class="fas fa-info-circle text-blue-600 text-xl mr-4 mt-1"></i>
                        <div>
                            <h4 class="font-bold text-blue-800 mb-2">Cookie的作用</h4>
                            <ul class="list-disc pl-5 space-y-2">
                                <li class="leading-snug">记住您的偏好和登录状态</li>
                                <li class="leading-snug">分析网站使用情况</li>
                                <li class="leading-snug">提供个性化内容</li>
                                <li class="leading-snug">改善网站性能</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <p class="text-gray-600 text-sm md:text-base">Cookie通常不包含任何能直接识别您身份的信息，但它们可以存储有关您浏览行为的信息。</p>
            </div>

            <div class="hidden md:block">
                <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
                     alt="Cookie技术"
                     class="rounded-xl shadow-lg transform -rotate-2 hover:rotate-0 transition duration-500 w-full h-auto object-cover">
            </div>
        </div>
    </section>

    <!-- 我们使用的Cookie类型 -->
    <section class="page-section bg-gray-50 text-gray-800 py-16">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold text-blue-800 mb-4">我们使用的Cookie类型</h2>
                <p class="text-lg md:text-xl max-w-3xl mx-auto">花龙腾航使用多种Cookie来确保您获得最佳的网站体验</p>
            </div>

            <div class="grid md:grid-cols-3 gap-8">
                <!-- 必要Cookie -->
                <div class="bg-white p-8 rounded-xl shadow-lg card-hover transition duration-300 transform hover:-translate-y-2">
                    <div class="text-blue-600 mb-4">
                        <i class="fas fa-shield-alt text-4xl"></i>
                    </div>
                    <h3 class="text-xl md:text-2xl font-bold mb-4 text-blue-800">必要Cookie</h3>
                    <p class="mb-4 text-sm md:text-base">这些Cookie对于网站运行是必不可少的，使您能够浏览网站并使用其功能。</p>
                    <div class="bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-xs md:text-sm inline-block">
                        <i class="fas fa-lock mr-2"></i> 无法禁用
                    </div>
                </div>

                <!-- 性能Cookie -->
                <div class="bg-white p-8 rounded-xl shadow-lg card-hover transition duration-300 transform hover:-translate-y-2">
                    <div class="text-green-600 mb-4">
                        <i class="fas fa-chart-line text-4xl"></i>
                    </div>
                    <h3 class="text-xl md:text-2xl font-bold mb-4 text-blue-800">性能Cookie</h3>
                    <p class="mb-4 text-sm md:text-base">这些Cookie帮助我们了解访问者如何与我们的网站互动，从而改进网站功能。</p>
                    <div class="bg-green-100 text-green-800 px-4 py-2 rounded-full text-xs md:text-sm inline-block">
                        <i class="fas fa-toggle-on mr-2"></i> 可选
                    </div>
                </div>

                <!-- 功能Cookie -->
                <div class="bg-white p-8 rounded-xl shadow-lg card-hover transition duration-300 transform hover:-translate-y-2">
                    <div class="text-purple-600 mb-4">
                        <i class="fas fa-cogs text-4xl"></i>
                    </div>
                    <h3 class="text-xl md:text-2xl font-bold mb-4 text-blue-800">功能Cookie</h3>
                    <p class="mb-4 text-sm md:text-base">这些Cookie允许网站记住您所做的选择，提供增强的个性化功能。</p>
                    <div class="bg-purple-100 text-purple-800 px-4 py-2 rounded-full text-xs md:text-sm inline-block">
                        <i class="fas fa-toggle-on mr-2"></i> 可选
                    </div>
                </div>

                <!-- 广告Cookie -->
                <div class="bg-white p-8 rounded-xl shadow-lg card-hover transition duration-300 transform hover:-translate-y-2 md:col-span-3">
                    <div class="flex flex-col md:flex-row items-start md:items-center gap-6">
                        <div class="md:w-1/4 text-center md:text-left">
                            <div class="text-red-600 inline-block">
                                <i class="fas fa-ad text-4xl"></i>
                            </div>
                        </div>
                        <div class="md:w-3/4">
                            <h3 class="text-xl md:text-2xl font-bold mb-4 text-blue-800">广告Cookie</h3>
                            <p class="mb-4 text-sm md:text-base">这些Cookie用于向您展示与您更相关的广告。它们还可以用于限制您看到广告的次数，并帮助衡量广告活动的效果。</p>
                            <div class="bg-red-100 text-red-800 px-4 py-2 rounded-full text-xs md:text-sm inline-block">
                                <i class="fas fa-toggle-off mr-2"></i> 默认禁用
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 如何管理Cookie -->
    <section class="page-section bg-gradient-to-br from-indigo-800 to-blue-900 text-white">
        <div class="container mx-auto px-6 py-16 h-full flex flex-col justify-center">
            <div class="max-w-4xl mx-auto">
                <h2 class="text-3xl md:text-4xl font-bold mb-8">如何管理Cookie设置</h2>

                <div class="bg-glass rounded-xl p-6 md:p-8 mb-8 card-hover">
                    <h3 class="text-xl md:text-2xl font-bold mb-4">浏览器设置</h3>
                    <p class="mb-6 text-sm md:text-base">大多数网络浏览器允许您通过浏览器设置控制Cookie。通常，您可以在浏览器的"选项"或"首选项"菜单中找到管理Cookie的设置。</p>

                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                        <a href="https://www.baidu.com" target="_blank" class="bg-white bg-opacity-20 hover:bg-opacity-30 rounded-lg p-3 md:p-4 flex items-center justify-center transition duration-300">
                            <i class="fab fa-chrome text-xl md:text-2xl mr-2"></i> Chrome
                        </a>
                        <a href="https://www.baidu.com"  target="_blank" class="bg-white bg-opacity-20 hover:bg-opacity-30 rounded-lg p-3 md:p-4 flex items-center justify-center transition duration-300">
                            <i class="fab fa-firefox text-xl md:text-2xl mr-2"></i> Firefox
                        </a>
                        <a href="https://www.baidu.com" target="_blank" class="bg-white bg-opacity-20 hover:bg-opacity-30 rounded-lg p-3 md:p-4 flex items-center justify-center transition duration-300">
                            <i class="fab fa-safari text-xl md:text-2xl mr-2"></i> Safari
                        </a>
                        <a href="https://www.baidu.com" target="_blank" class="bg-white bg-opacity-20 hover:bg-opacity-30 rounded-lg p-3 md:p-4 flex items-center justify-center transition duration-300">
                            <i class="fab fa-edge text-xl md:text-2xl mr-2"></i> Edge
                        </a>
                    </div>
                </div>

                <div class="bg-glass rounded-xl p-6 md:p-8 card-hover">
                    <h3 class="text-xl md:text-2xl font-bold mb-4">我们的Cookie控制面板</h3>
                    <p class="mb-6 text-sm md:text-base">您可以通过我们的Cookie控制面板随时更改您的Cookie偏好设置：</p>

                    <div class="space-y-4">
                        <div class="flex items-center justify-between bg-white bg-opacity-10 rounded-lg p-4">
                            <div>
                                <h4 class="font-medium">必要Cookie</h4>
                                <p class="text-xs text-blue-200">这些Cookie对网站功能至关重要</p>
                            </div>
                            <label class="toggle-switch">
                                <input type="checkbox" checked disabled>
                                <span class="toggle-slider"></span>
                            </label>
                        </div>

                        <div class="flex items-center justify-between bg-white bg-opacity-10 rounded-lg p-4">
                            <div>
                                <h4 class="font-medium">性能Cookie</h4>
                                <p class="text-xs text-blue-200">帮助我们改进网站性能</p>
                            </div>
                            <label class="toggle-switch">
                                <input type="checkbox" checked>
                                <span class="toggle-slider"></span>
                            </label>
                        </div>

                        <div class="flex items-center justify-between bg-white bg-opacity-10 rounded-lg p-4">
                            <div>
                                <h4 class="font-medium">功能Cookie</h4>
                                <p class="text-xs text-blue-200">提供个性化体验</p>
                            </div>
                            <label class="toggle-switch">
                                <input type="checkbox" checked>
                                <span class="toggle-slider"></span>
                            </label>
                        </div>

                        <div class="flex items-center justify-between bg-white bg-opacity-10 rounded-lg p-4">
                            <div>
                                <h4 class="font-medium">广告Cookie</h4>
                                <p class="text-xs text-blue-200">个性化广告体验</p>
                            </div>
                            <label class="toggle-switch">
                                <input type="checkbox">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<script>
    // 视差滚动效果
    document.addEventListener('scroll', function() {
        const parallaxBg = document.querySelector('.parallax-bg');
        const scrollPosition = window.pageYOffset;
        parallaxBg.style.transform = 'translateY(' + scrollPosition * 0.5 + 'px)';

        // 更新导航点状态
        const sections = document.querySelectorAll('.page-section');
        const navDots = document.querySelectorAll('.nav-dot');

        sections.forEach((section, index) => {
            const rect = section.getBoundingClientRect();
            if (rect.top <= window.innerHeight * 0.5 && rect.bottom >= window.innerHeight * 0.5) {
                navDots.forEach(dot => dot.classList.remove('active'));
                navDots[index].classList.add('active');
            }
        });
    });

    // 导航点点击事件
    document.querySelectorAll('.nav-dot').forEach(dot => {
        dot.addEventListener('click', function() {
            const targetIndex = parseInt(this.getAttribute('data-target'));
            const sections = document.querySelectorAll('.page-section');
            sections[targetIndex].scrollIntoView({ behavior: 'smooth' });
        });
    });

    // 响应式调整
    function handleResize() {
        if (window.innerWidth < 768) {
            document.querySelector('.page').style.scrollSnapType = 'none';
        } else {
            document.querySelector('.page').style.scrollSnapType = 'y mandatory';
        }
    }

    window.addEventListener('resize', handleResize);
    handleResize();
</script>
</body>
</html>